<template>
  <div class="enter">
    <van-nav-bar left-arrow title="会员登录" @click-left="$router.back()" />
    <!--    顶部-->
    <!--    内容-->
    <div class="content">
      <div class="title">
        <div>手机号登录</div>
        <p>未注册的手机号登录后将自动注册</p>
      </div>
      <div class="item-form">
        <div class="ipt">
          <input
            v-model="PhoneNumber"
            placeholder="请输入手机号码"
            type="text"
          />
        </div>
        <div class="ipt">
          <input v-model="PicWord" placeholder="请输入图形验证码" type="text" />
          <img v-if="PicCode" :src="PicCode" alt="" @click="getPicCode()" />
        </div>
        <div class="ipt">
          <input
            v-model="PhoneCode"
            placeholder="请输入短信验证码"
            type="text"
          />
          <button class="btn" @click="getCode()">
            {{ Second === 60 ? "获取验证码" : Second + "秒后重新发送" }}
          </button>
        </div>
      </div>
      <van-button
        class="enter-btn"
        color="linear-gradient(to right, #EDB338, #FD9414)"
        @click="enter()"
      >
        登录
      </van-button>
    </div>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { enter, getCode, getPicCode } from '@/api/enter'
import { Toast } from 'vant'

export default {
  name: 'enterCom',
  // import引入的组件需要注入到对象中才能使用",
  components: {},
  data () {
    // 这里存放数据",
    return {
      PicCode: '', // 存储接口请求来的图片
      PicKey: '', // 图形验证码的key
      PicWord: '', // 用户输入图形验证码
      PhoneNumber: '', // 输入的手机号
      PhoneCode: '', // 用户输入短信验证码
      Second: 60, // 当前倒计时
      Timer: null
    }
  },
  // 监听属性 类似于data概念",
  computed: {},
  // 方法集合",
  methods: {
    async enter () {
      if (!this.valid()) {
        return false
      }
      if (!/^\w{6}$/.test(this.PhoneCode)) {
        this.$toast('请输入正确的短信验证码')
        return false
      }
      try {
        const res = await enter(this.PhoneNumber, this.PhoneCode)
        this.$store.commit('user/saveInfo', res.data.data)
        this.$toast('登录成功')
        this.$router.push('/')
      } catch (error) {
        console.log(error)
      }
    },
    async getPicCode () {
      const {
        data: {
          data: { base64, key }
        }
      } = await getPicCode()
      this.PicCode = base64
      this.PicKey = key
    },
    valid () {
      if (!/^1[3-9]\d{9}$/.test(this.PhoneNumber)) {
        Toast('请输入正确的手机号')
        return false
      }
      if (!/^\w{4}$/.test(this.PicWord)) {
        Toast('请输入正确的图片验证码')
        return false
      }
      return true
    },
    async getCode () {
      if (!this.valid()) {
        return
      }
      if (this.Second === 60) {
        const res = await getCode(this.PicWord, this.PicKey, this.PhoneNumber)
        console.log(res)
        this.Timer = setInterval(() => {
          this.Second--
          if (this.Second <= 0) {
            this.Second = 60
            clearInterval(this.Timer)
            this.Timer = null
          }
        }, 1000)
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created () {
    this.getPicCode()
  },
  destroyed () {
    clearInterval(this.Timer)
  }
}
</script>
<style lang="less">
.enter {
  .van-nav-bar .van-icon {
    color: #676762;
  }

  .content {
    padding: 40px 20px;

    .title {
      margin-bottom: 40px;

      div {
        font-size: 30px;
        margin-bottom: 15px;
      }

      p {
        color: #cececd;
      }
    }

    .item-form {
      .ipt {
        padding: 20px 20px;
        border-bottom: 1px solid #f8f8f8;
        display: flex;
        justify-content: space-between;

        .btn {
          background-color: white;
          border: none;
          color: #f1ab30;
        }

        img {
          height: 40px;
          width: 120px;
        }

        button {
          height: 30px;
          width: 100px;
        }

        input {
          border: none;
        }
      }
    }

    .enter-btn {
      margin-top: 40px;
      width: 100%;
      border-radius: 20px;
    }
  }
}
</style>
